import React from "react";
import {Button, Form, Input} from "antd";
import {LockOutlined, UserOutlined} from "@ant-design/icons";


type FieldType = {
  username?: string;
  password?: string;
  rePassword?: string
};
const RegisterForm: React.FC = () => {

  return (
    <div>
      <Form name="login" initialValues={{remember: true}} autoComplete="off" className="login-box-right-form">
        <Form.Item<FieldType> name="username" rules={[{required: true, message: '请输入用户名！'}]}>
          <Input prefix={<UserOutlined/>} autoComplete="off" size="large" placeholder="请输入用户名"/>
        </Form.Item>

        <Form.Item<FieldType> name="password" rules={[{required: true, message: '请输入密码！'}]}>
          <Input.Password autoComplete="off" prefix={<LockOutlined/>} size="large"
                          placeholder="请输入密码"/>
        </Form.Item>

        <Form.Item<FieldType> name="rePassword" rules={[{required: true, message: '请再次输入密码！'}]}>
          <Input.Password autoComplete="off" prefix={<LockOutlined/>} size="large"
                          placeholder="请输入密码"/>
        </Form.Item>


        <Form.Item>
          <Button size="large" style={{width: "100%"}} type="primary" htmlType="submit">
            注册
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default RegisterForm